{% extends 'base/front_base.html' %}

{% block title %}
  测试form
{% endblock %}

{% block link %}
  <style>
    #btn, #b {
      display: block;
      width: 100px;
      height: 40px;
      margin: 200px auto;
      background: #000;
      color: #fff;
      line-height: 40px;
      text-align: center;
    }

    #b {
      margin: 30px auto;
    }
  </style>
{% endblock %}

{% block script %}
  <script>
    let $btn = $("#btn");

    $btn.click(() => {
      {# get 请求 #}
      /*
      *   success: res => {
      *   }
      *     function (z,v){
      *     }
      *     (z, v) => {
      *     }
      * */
      {# ctrl +shift +r #}
      $.post({
        url: "/test-data/",
        success: function (res) {
          {#console.log(res);#}
          // 看到 let 块级作用域  ==> var 全局 script function
          let data = res["data"];
          // 遍历数组 for循环  forEach
          {#console.log(data);#}
          /*
          for (let i=0;i<data.length; i++){
            let user = data[i];
            console.log(user);
          }
          */
          /* 数组内置的方法 是原生JS 不是jQ */
          data.forEach((a, index) => {
            console.log(a);
            console.log(index);
          });
          {#console.log(data);#}
          // 返回true 不是数组返回 false
          {#console.log(Array.isArray({"1":1}));#}
          // json格式的字符串 转json
          {#obj = JSON.parse(res);#}
          {#console.log(obj);#}
        },
        error: err => {
          console.log(err);
        }
      });
    });
  </script>
  <script>
    $("#b").click(function () {
      $.get("/test-data/", data => {
        //let data = {
        // data: []
        //}
        console.log(data); //{data: Array(2)} ==> json {data: []}
        // typeof json/array ==> obj
        console.log(Array.isArray(data));
        let d = data["data"];
        d.forEach(item => {
          console.log(item);
        })
      })
    })
  </script>
{% endblock %}

{% block main %}
  <main style="flex: 1">
    <a href="javascript:void(0);" id="btn">点击</a>
    <a href="javascript:void(0);" id="b">点击我</a>
  </main>
{% endblock %}